<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤记录分析API演示</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            transition: border-color 0.3s;
        }
        .upload-area:hover {
            border-color: #007bff;
        }
        .upload-area.dragover {
            border-color: #007bff;
            background-color: #f8f9fa;
        }
        input[type="file"] {
            display: none;
        }
        .upload-btn {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .upload-btn:hover {
            background: #0056b3;
        }
        .analyze-btn {
            background: #28a745;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
            margin-top: 20px;
        }
        .analyze-btn:hover {
            background: #218838;
        }
        .analyze-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        .result {
            margin-top: 30px;
            padding: 20px;
            border-radius: 5px;
            display: none;
        }
        .result.success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .result.error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .result-item {
            margin: 10px 0;
            padding: 8px;
            background: rgba(255,255,255,0.7);
            border-radius: 3px;
        }
        .result-label {
            font-weight: bold;
            color: #333;
        }
        .loading {
            text-align: center;
            padding: 20px;
            display: none;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
            margin: 0 auto 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .file-info {
            margin-top: 10px;
            padding: 10px;
            background: #e9ecef;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>考勤记录分析API演示</h1>
        
        <div class="upload-area" id="uploadArea">
            <p>拖拽文件到此处或点击选择文件</p>
            <button class="upload-btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
            <input type="file" id="fileInput" accept=".pdf,.docx,.png,.jpg,.jpeg,.bmp,.tiff,.webp">
            <p style="margin-top: 10px; font-size: 14px; color: #666;">支持格式：PDF、DOCX、PNG、JPG、JPEG、BMP、TIFF、WEBP</p>
        </div>
        
        <div class="file-info" id="fileInfo">
            <strong>已选择文件：</strong><span id="fileName"></span><br>
            <strong>文件大小：</strong><span id="fileSize"></span>
        </div>
        
        <button class="analyze-btn" id="analyzeBtn" onclick="analyzeFile()" disabled>分析考勤记录</button>
        
        <div class="loading" id="loading">
            <div class="spinner"></div>
            <p>正在分析文件，请稍候...</p>
        </div>
        
        <div class="result" id="result">
            <h3>分析结果</h3>
            <div id="resultContent"></div>
        </div>
    </div>

    <script>
        let selectedFile = null;
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const fileInfo = document.getElementById('fileInfo');
        const analyzeBtn = document.getElementById('analyzeBtn');
        const loading = document.getElementById('loading');
        const result = document.getElementById('result');

        // 文件拖拽处理
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                handleFileSelect(files[0]);
            }
        });

        // 文件选择处理
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        function handleFileSelect(file) {
            selectedFile = file;
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = formatFileSize(file.size);
            fileInfo.style.display = 'block';
            analyzeBtn.disabled = false;
            result.style.display = 'none';
        }

        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        async function analyzeFile() {
            if (!selectedFile) {
                alert('请先选择文件');
                return;
            }

            // 显示加载状态
            loading.style.display = 'block';
            result.style.display = 'none';
            analyzeBtn.disabled = true;

            const formData = new FormData();
            formData.append('attendance_file', selectedFile);

            try {
                const response = await fetch('http://localhost:8000/analyze_attendance', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();

                if (response.ok) {
                    displayResult(data, 'success');
                } else {
                    displayResult({error: data.detail || '分析失败'}, 'error');
                }
            } catch (error) {
                displayResult({error: '网络错误：' + error.message}, 'error');
            } finally {
                loading.style.display = 'none';
                analyzeBtn.disabled = false;
            }
        }

        function displayResult(data, type) {
            const resultContent = document.getElementById('resultContent');
            result.className = 'result ' + type;
            result.style.display = 'block';

            if (type === 'error') {
                resultContent.innerHTML = `<div class="result-item"><span class="result-label">错误：</span>${data.error}</div>`;
            } else {
                let html = '';
                for (const [key, value] of Object.entries(data)) {
                    html += `<div class="result-item"><span class="result-label">${key}：</span>${value}</div>`;
                }
                resultContent.innerHTML = html;
            }
        }
    </script>
</body>
</html>